<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-12-01 17:25:01
 * @LastEditors: 杨超
 * @Description:
-->
<template>
  <!--  字典下拉框（指通过数据字典获取选项）  -->
  <div
    :style="item.style || {}"
    :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`"
  >
    <el-select
      v-if="!getTextModel"
      v-model="val"
      style="width: 100%"
      :disabled="getDisabled"
      :placeholder="getPlaceholder(item)"
    >
      <el-option
        v-for="option in dynamicDict[item.parentKey]"
        :key="option[dynamicSelectOption.value]"
        :label="option[dynamicSelectOption.label]"
        :value="option[dynamicSelectOption.value]"
      />
    </el-select>
    <div v-else :style="item.textStyle || {}" class="form-input-text">
      {{ textModelValue || '-' }}
    </div>
  </div>
</template>

<script>
import FormMixin from './mixin'

export default {
    name: 'FormDynamicSelect',
    mixins: [FormMixin],
    computed: {
        textModelValue() {
            const content = this.dynamicDict[this.item.parentKey] && this.dynamicDict[this.item.parentKey].find((item) => {
                return item[this.dynamicSelectOption.value] === this.val
            })
            return content && content[this.dynamicSelectOption.label] || ''
        },

        val: {
            get() {
                return this.value
            },
            set(v) {
                this.$emit('input', v)
                this._valueLink(v)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: v
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
</style>
